<template>
    <div class="conut">
        <i class="iconfont icon-bingtu"></i>
        用户购买 统计
    </div>
    <div class="container" ref="target">

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import echarts from 'echarts'


const target = ref(null)
let mChart
onMounted(() => {
    mChart = echarts.init(target.value)
    renderChart()
})
const renderChart = () => {
    var option = {
        title: {
            // text: 'Referer of a Website',
            // subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            right: 'right'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                right: 100,
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    mChart.setOption(option)
}
</script>

<style lang="scss" scoped>
.container {
    height: 286px;
    padding-top: 20px;
}

.conut {
    padding: 12px 8px;
    border-bottom: 1px solid #f0eaea;
}
</style>